import 'package:blinds_page/data/role_data.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class RoleItem extends StatefulWidget {
  RoleData data;

  RoleItem({super.key, required this.data});

  @override
  State<RoleItem> createState() => _RoleItemState();
}

class _RoleItemState extends State<RoleItem> {
  bool isHover = false;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (ctx, size) {
      return MouseRegion(
        onEnter: (_) {
          changeHover(true);
        },
        onExit: (_) {
          changeHover(false);
        },
        child: Stack(
          alignment: Alignment.center,
          clipBehavior: Clip.none,
          children: [
            _ItemBg(
              isHover: isHover,
              height: size.maxHeight,
              data: widget.data,
            ),
            _ItemPartnerAdultPic(
              isHover: isHover,
              data: widget.data,
            )
          ],
        ),
      );
    });
  }

  void changeHover(bool isHover) {
    setState(() {
      this.isHover = isHover;
    });
  }
}

class _ItemBg extends StatelessWidget {
  bool isHover;

  double height;

  RoleData data;

  _ItemBg(
      {super.key,
      required this.isHover,
      required this.height,
      required this.data});

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      margin: EdgeInsets.only(left: isHover ? 40 : 0, right: isHover ? 100 : 0),
      padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 5),
      width: isHover ? 180 : 120,
      height: isHover ? height : 750,
      duration: const Duration(milliseconds: 300),
      decoration: BoxDecoration(
          // 背景描述 鼠标覆盖是紫色，圆角为0 离开时圆角为8紫色渐变
          borderRadius: BorderRadius.circular(isHover ? 0 : 8),
          gradient: LinearGradient(colors: [
            Colors.purpleAccent.withOpacity(isHover ? 0.2 : 0.4),
            Colors.purpleAccent.withOpacity(0.2),
            Colors.purpleAccent.withOpacity(isHover ? 0.2 : 0.4)
          ], begin: Alignment.topCenter, end: Alignment.bottomCenter)),
      child: AnimatedOpacity(
        duration: Duration(milliseconds: 300),
        opacity: isHover ? 0 : 1,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Image.asset(data.partnerPng),
            SizedBox(
              height: 20,
            ),
            Image.asset(data.rolePng)
          ],
        ),
      ),
    );
  }
}

class _ItemPartnerAdultPic extends StatelessWidget {
  bool isHover;
  RoleData data;

  _ItemPartnerAdultPic({super.key, required this.data, required this.isHover});

  @override
  Widget build(BuildContext context) {
    return AnimatedPositioned(
        width: 500,
        height: 800,
        left: isHover ? -150 : -100,
        child: AnimatedOpacity(
          child: Image.asset(data.partnerAdultPng),
          duration: Duration(milliseconds: 300),
          opacity: isHover ? 1 : 0,
        ),
        duration: Duration(milliseconds: 500));
  }
}
